<template>
	<div>
		<el-container>
			<el-header>
				<h4>待确认订单详情</h4>
			</el-header>
		</el-container>
		<el-container>
			<el-table :data="list">
				<el-table-column label="图片">
					<template #default="scope">
						<img :src="`${$Imgurl}/showImg/${scope.row.picture}`">
					</template>
				</el-table-column>
				<el-table-column label="商品名称" prop="name"></el-table-column>
				<el-table-column label="商品价格" prop="price"></el-table-column>
				<el-table-column label="商品数量" prop="num"></el-table-column>
				<el-table-column label="商品总价">
					<template #default="scope">
						{{scope.row.num*scope.row.price}}
					</template>
				</el-table-column>
			</el-table>
		</el-container>
		<p>总价钱：{{getsum}}</p>
		<p>
			<el-button type="primary">请输入收货地址</el-button>
			<el-input placeholder="请输入收货地址" v-model="form.addr"></el-input>
		</p>
		<p>
			<el-button type="primary">请输入联系方式</el-button>
			<el-input placeholder="请输入联系方式" v-model="form.phone"></el-input>
		</p>
		<p style="text-align: center;">
			<el-button v-if="show==1" type="warning" @click="goagain()">重新选择</el-button>
			<el-button v-if="show==2" type="success">订单号{{bid}}</el-button>
			<el-button v-if="show2==1" @click="gopay()" type="danger">下单</el-button>
			<el-button v-if="show2==2" @click="pay()" type="danger">去付款</el-button>
		</p>
	</div>
</template>

<script>
	import instance from '../../../ajax/index.js'
	export default {
		name: 'Menu',
		data() {
			return {
				bid:'',
				list: [],
				txt: '下单',
				show: 1,
				show2:1,
				form: {
					ordid:'',
					addr: '',
					phone: ''
				}

			}
		},
		methods: {
			goagain() {
				this.$store.state.menus = []
				this.$router.push('/home/cart')
			},
			gopay() {

				if (this.form.addr == '' && this.form.phone == '') {
					this.$message.error({
						message: "请填写收货信息",
						offset: 80
					})
				} else {
					let newlist = []
					for (let i in this.list) {
						let form = {}
						form.bookid = this.list[i].bookid
						form.price = this.list[i].price
						form.num = this.list[i].num
						newlist.push(form)
					}
					
					instance.post('/api/fore/cart/addCart2Order', newlist, {
						headers:{'Content-Type':'application/json'}
					}).then((res) => {
						this.form.ordid = res.data.data.ordid; 
						instance.post('/api/fore/ord/addAddr',this.form,{
							headers:{'Content-Type':'application/json'}
						}).then( (res)=>{
							this.$message.success({
								message: "下单成功，订单号："+this.form.ordid,
								offset: 80
							})
							this.show2=2
							this.show=2
							this.bid=this.form.ordid
						} ).catch( (error)=>{
							console.log(error);
						} )
					}).catch((error) => {
						console.log(error);
					})
				}
			},
			pay(){
				this.$router.push('/home/paymenu')
				this.$router.push({
					path:'/home/paymenu',
					query:{
						ordid:this.form.ordid,
						addr:this.form.addr,
						phone:this.form.phone
					}
				})
			}
		},
		computed: {
			getsum() {
				if (this.list.length == 0) {
					return 0
				} else {
					let sum=0
					for(let i in this.list){
						 sum+=this.list[i].price * this.list[i].num
					}
					return sum
				}

			}
		},
		created() {
			this.list = this.$store.state.menus
		}

	}
</script>

<style scoped>
	.el-table {
		width: 100%;
		margin: auto;
	}

	p {
		margin-left: 15px;
		margin-top: 15px;
	}

	.el-input {
		width: 500px;
	}

	.el-header {
		margin-top: 56px;
		font-weight: bold;
		font-size: 20px;
		line-height: 60px;
	}

	img {
		height: 100px;
	}
</style>
